<template>
    <van-action-sheet
        v-model:show="visible"
        @cancel="clickCancel"
    >
        <van-area
            title="选择省市区"
            :area-list="areaListColumns"
            @confirm="clickConfirm"
        />
    </van-action-sheet>
</template>

<script setup>
    import { areaList } from '@vant/area-data';
    import { ref } from 'vue'

    const emits = defineEmits(['confirm'])

    const areaListColumns = ref(areaList)
    const visible = ref(false)

    const clickCancel = () => {
        visible.value = false
    }
    const clickConfirm = ({ selectedOptions }) => {
        emits('confirm', selectedOptions)
        clickCancel()
    }

    defineExpose({
        init () {
            visible.value = true
        }
    })
</script>

<style scoped lang="less"></style>